<template>
  <div class="cart">
    <nav-bar class="navbar">
      <span slot="left" class="iconfont icon-huitui leftInfo" @click="$router.back()"></span>
      <div slot="center" class="center">购物车</div>
      <span slot="right" class="iconfont icon-gengduo right-icon"></span>
    </nav-bar>
    <div class="wrapper">
      <div v-if="cartList.length>0">
        <van-swipe-cell class="cell" v-for="(item,index) in cartList" :key="item.productId">
          <van-checkbox :name=" item.productId" class="button" checked-color="red" ref="check" v-model=" cartInfo[index].isChecked">
          </van-checkbox>

          <van-card :desc="item.subtitle" :title="item.name" class="goods-card" :thumb="item.imageHost +item.mainImage" @click-thumb="$router.push('/detail/'+item.productId)">
            <template #footer>
              <div class="headel clearfix">
                <span class="price fl">￥{{cartInfo[index].price}}</span>
                <div class="fr item">
                  <van-button @click="subClick(index)" :disabled="disabled ">-</van-button>
                  <span class="count">{{cartInfo[index].count}}</span>
                  <van-button @click.native="addClick(index)">+</van-button>
                </div>
              </div>
            </template>
          </van-card>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click.native="cartInfoDel(item.id)" />
          </template>
        </van-swipe-cell>

      </div>
    </div>
    <van-submit-bar :price="allPrice" button-text="提交订单">
      <van-checkbox v-model="checked" checked-color="red" ref="allChecked">全选</van-checkbox>
    </van-submit-bar>
    <div class="tip">
      <span class="left"></span>
      <span class="nend">可能你还想要</span>
      <span class="right"></span>
    </div>
    <recommend :recommend-list-info="recommendList" class="recommendList"></recommend>

    <!--弹出框 -->
    <van-dialog v-model="show" show-cancel-button @confirm="confirmDel">
      <span slot="default" class="delInfo">确定要删除吗？</span>
    </van-dialog>
  </div>
</template>
<script>
import navBar from 'components/common/navbar/navBar'
import Recommend from 'components/content/recommend/Recommend'

import { SwipeCell, Checkbox, Card, Button, SubmitBar, Toast, Dialog } from 'vant';
import { mapState } from 'vuex';



export default {
  name: 'Cart',
  data() {
    return {
      allChecked: false,
      recommendList: [],
      cartList: [],
      disabled: false,
      delId: false,
      id: 0,
      delIndex: 0,
      show: false
    }
  },
  components: {
    navBar,
    Recommend,
    [SwipeCell.name]: SwipeCell,
    [Checkbox.name]: Checkbox,
    [Card.name]: Card,
    [Button.name]: Button,
    [SubmitBar.name]: SubmitBar,
    [Toast.name]: Toast,
    [Dialog.Component.name]: Dialog.Component,

  },
  created() {
    this.getRecommendInfo()
    this.getCartInfo()
    this.initCount()
  },
  computed: {
    allPrice() {
      return this.$store.getters.allCart.allPrice
    },
    ...mapState(["cartInfo"]),

    // 全选
    checked: {
      get() {
        if (this.cartList.length > 0) {
          return this.$store.state.cartInfo.every(item => item.isChecked)
        }

      },
      set(val) {
        return this.$store.state.cartInfo.forEach(item => item.isChecked = val)
      }
    }
  },
  methods: {

    cartInfoDel(id) {
      this.delId = id
      this.show = true
    },
    async confirmDel() {
      const res = await this.$require({
        url: '/cart/del',
        method: 'post',
        data: {
          id: this.delId
        }
      })
      if (res.status == 0) {
        this.show = false
        Toast('已删除该商品~')
        this.getCartInfo()
      }
    },

    subClick(index) {
      if (this.$store.state.cartInfo[index].count == 1) {
        this.disabled = true
        Toast('至少保留一件商品~')
        // return this.disabled = false
      } else {
        this.disabled = false
        let productId = this.$store.state.cartInfo[index].id
        let count = this.$store.state.cartInfo[index].count
        let id = this.cartList[index].id
        this.updataCartCount(id, productId, count, index, 1)

      }
      // 发送网络请求  ---->更新数量


    },
    addClick(index) {
      this.disabled = false
      let productId = this.$store.state.cartInfo[index].id
      let count = this.$store.state.cartInfo[index].count
      let id = this.cartList[index].id
      this.updataCartCount(id, productId, count, index, 2)
    },

    // 进入时判断当前购物车商品数量如果为1 禁止减商品的点击事件
    initCount() {
      this.$store.state.cartInfo.filter(item => {
        if (item.count <= 1) {
          return this.disabled = true
        } else {
          return this.disabled = false
        }
      })
    },

    async getCartInfo() {
      const res = await this.$require({
        url: '/cart/list',
        method: 'get'
      })
      if (res.status == 0) {

        // 给购物车添加默认的没有选中的属性
        let cartInfo = []

        res.data.forEach(item => {
          cartInfo.push({
            id: item.productId,
            count: item.count,
            price: item.price,
            isChecked: false
          })
        })
        // 将数据保存在store中
        this.$store.dispatch('saveCartInfo', cartInfo)

        this.cartList = res.data

      }
    },

    async getRecommendInfo() {
      const res = await this.$require({
        url: '/product/recommend',
        method: 'get'
      })
      if (res.status == 0) {
        this.recommendList = res.data
      }
    },

    // 封装更新购物车数量的方法
    async updataCartCount(id, productId, count, index, type) {
      // 先删除
      const res = await this.$require({
        url: '/cart/del',
        method: 'post',
        data: {
          id: id
        }
      })
      if (res.status == 0) {
        const item = await this.$require({
          url: '/cart/add',
          method: 'post',
          data: {
            productId,
            count
          }
        })
        if (item.status == 0) {
          if (type == 1) {
            this.$store.dispatch('updateCount', { index: index, type: 1 })
          } else {
            this.$store.dispatch('updateCount', { index: index, type: 2 })
          }
        }
      }
    }

  },

}
</script>
<style scoped lang="scss">
.cart {
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
}
.navbar {
  background-color: #f9f9f9;
  height: 44px;
  font-size: 16px;
  font-weight: 500;
  .leftInfo {
    font-weight: bold;
    font-size: 20px;
    display: block;
  }
  .right-icon {
    font-size: 20px;
    font-weight: 500;
    display: block;
  }
}
.delete-button {
  height: 100%;
}
.goods-card {
  margin-left: 30px;
  margin-top: 0;
  background-color: #fff;
  font-size: 13px;
}
.wrapper {
  margin-top: 50px;
}
.cell {
  position: relative;
  background-color: #fff;
  margin-bottom: 10px;
}
.button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
}
.tip {
  height: 24px;
  padding: 20px 10px;

  background-color: #fff;
  margin: 16px 0;
  display: flex;
  justify-content: space-between;
  text-align: center;

  span {
    flex: 1;
    border-top: 1px solid #999;
  }
  .nend {
    border-top: none;
    color: #999;
    line-height: 24px;
    font-size: 14px;
  }
  .left,
  .right {
    margin-top: 10px;
  }
}
.recommendList {
  padding-bottom: 100px;
}
.van-card__desc {
  padding-top: 3px;
  font-size: 12px;
  color: #999;
}
.van-card__footer {
  width: 200px;
  position: absolute;
  bottom: 5%;
  z-index: 99;
  right: 10%;
}
.headel {
  span {
    font-size: 14px;
  }
  .price {
    color: red;
  }
  .item {
    text-align: right;
    button {
      width: 20px;
      height: 20px;
      line-height: 20px;
      background-color: #eee;
      color: #323233;
      font-size: 14px;
      border: none;
      border-radius: 20px;
    }
    .count {
      margin: 0 3px;
      display: inline-block;
      height: 20px;
      position: relative;
      top: 3px;
    }
  }
}
.van-submit-bar {
  bottom: 50px;
}
.delInfo {
  display: inherit;
  padding: 40px 0;
  text-align: center;
}
</style>
